<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号 -登录</title>
    <link rel="stylesheet" href="../css/login.css">
    <script src="//at.alicdn.com/t/font_2525490_5uz6vu1dhp6.js"></script>
</head>

<body>
    <div class="banner"></div>
    <div id="container">
        <div class="header">
            <div class="header-logo">
                <a href="./index.html"><img src="../img/logo-mi2.png" alt=""></a>
                <h3>小米账号</h3>
            </div>
            <div class="header-nav">
                <ul>
                    <li><a href="">用户协议</a></li>
                    <li><a href="">隐私政策</a></li>
                    <li><a href="">帮助中心</a></li>
                    <li>|</li>
                    <li>
                        <span>中文(简体) <span class="caret"></span>
                            <ul class="language">
                                <li>中文(繁体)</li>
                                <li>English</li>
                            </ul>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div id="select">
            <div class="select-header">
                <span class="select-active">登录</span>
                <span class="gotoreg">注册</span>
                <div class="move-active"></div>
                <div class="code">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                </div>
                <div class="blank-box"></div>
            </div>
            <div class="select-login">
                <form action="../../interface/login.php" method="POST" class="sl-form">
                    <div style="position: relative;">
                        <div class="input-info">邮箱/手机号码/小米ID</div>
                        <input type="text" name="sl-username" class="sl-username active-inputbox">
                    </div>
                    <p class="hide">请输入账号</p>
                    <div style="position: relative;">
                        <div class="input-info">密码</div>
                        <input type="password" name="sl-password" class="sl-password active-inputbox">
                    </div>
                    <p class="hide">请输入登录密码</p>
                    <input type="submit" value="登录" class="sl-submit">
                    <div class="sl-other">
                        <a href="">忘记密码？</a>
                        <a href="">手机号登录</a>
                    </div>
                </form>
            </div>
            <div class="select-reg hide">
                <form action="" method="POST" class="sr-form">
                    <div class="sr-country">
                        <p>国家/地区</p>
                        <div>中国</div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </div>
                    <div class="list-active hide" style="top: 168px;left: 48px; z-index: 20;">
                        <div style="padding: 10px 20px;background-color: #fff;">
                            <div class="list-search">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-fangdajing"></use>
                                </svg>
                                <input type="text" class="list-search" placeholder="搜索国家/地区名称">
                            </div>
                        </div>
                        <ul class="country-list normal-list">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                        </ul>
                    </div>
                    <div class="sr-phone">
                        <div class="sr-phone-left">
                            <p>国家码</p>
                            <div>+86</div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        <div class="list-active hide" style="top: 60px;left: 0;">
                            <div style="padding: 10px 20px;background-color: #fff;">
                                <div class="list-search">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-fangdajing"></use>
                                    </svg>
                                    <input type="text" class="list-search" placeholder="搜索国家/地区名称">
                                </div>
                            </div>
                            <ul class="phone-list normal-list">
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                                <li>8</li>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                            </ul>
                        </div>
                        <div class="input-info" style="left: 160px;">手机号</div>
                        <input type="text" class="userphone active-inputbox" name="userphone">

                    </div>
                    <p class="hide">请输入手机号码</p>
                    <div style="position: relative;margin: 20px 0 10px;">
                        <input type="text" name="sr-message" class="sr-message active-inputbox">
                        <div class="input-info">短信验证码</div>
                        <button class="sr-getmessage">获取验证码</button>
                    </div>
                    <p class="hide">请输入短信验证码</p>
                    <input type="submit" value="注册" class="sr-submit">
                    <div class="sr-other">
                        <a href="">收不到验证码？</a>
                    </div>
                    <div class="sr-footer">
                        已阅读并同意小米帐号 <span>用户协议</span> 和 <span>隐私政策</span>
                    </div>
                </form>
            </div>
            <div class="select-footer">
                <p>其他方式登录</p>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-qq"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weibo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin"></use>
                </svg>
            </div>
        </div>

        <div id="footer">
            <p>小米公司版权所有-京ICP备10046444- <span>京公网安备11010802020134号</span> -京ICP证110507号</p>
        </div>
    </div>
    <script src="../js/login.js" type="module"></script>
</body>

</html>